import React from 'react';
import styled from 'styled-components';

interface IProps {
  from?: string;
  to?: string;
  changeFromTo?(): void;
  toFloor?(dir: string): void
}

const Nav: React.FC<IProps> = (props) => {

  const { from, to, changeFromTo, toFloor } = props;

  return <NavWrapper>
    <div className="left"
      onClick={() => {
        toFloor && toFloor('left')
      }}
    >{from}</div>
    <div className="mid" onClick={() => {
      changeFromTo && changeFromTo()
    }}>↔️</div>
    <div className="left"
      onClick={() => {
        toFloor && toFloor('right')
      }}
    >{to}</div>
  </NavWrapper>
}

export default Nav;


const NavWrapper = styled.nav`
  height: 50px;
  background: #eee;
  display:flex;
  .left {
    flex: 4; 
    display:flex;
    justify-content: center;
    align-items:center;
  }
  .mid {
    flex: 2; 
    display:flex;
    justify-content: center;
    align-items:center;
  }
  .right {
    flex: 4; 
    display:flex;
    justify-content: center;
    align-items:center;
  }
`